//0 . 获取数据
  //搜索框
const inp = document.querySelector('.text')
const ul = document.querySelector('#search_word')
  // 二级菜单


  //京东秒杀  
const hs = document.querySelector('#hours');
const ms = document.querySelector('#minutes');
const ss = document.querySelector('#seconds');

















// 轮播图

class Banner {
  constructor (select) {
    // 范围元素
    this.ele = document.querySelector(select)
    // imgBox
    this.imgBox = this.ele.querySelector('.imgBox')
    // pointBox
    this.pointBox = this.ele.querySelector('.pointBox')
    // 表示索引的变量
    this.index = 0
    // 定时器的返回值
    this.timer = 0


    // 直接调用启动器
    this.init()
  }

  // 0. 准备一个启动器
  init () {
    this.setPoint()
    this.autoPlay()
    this.overOut()
    this.bindEvent()
  }
  setPoint () {
    // 1-1. 拿到需要生成多少个焦点
    const n = this.imgBox.children.length

    // 1-2. 循环生成焦点
    for (let i = 0; i < n; i++) {
      const li = document.createElement('li')

      // 默认第一个 li 有 active 类名
      if (i === 0) li.classList.add('active')

      // 每一个 li 添加一个类名
      li.classList.add('point')

      // 把索引以自定义属性的方式写在标签身上
      li.dataset.point = i

      this.pointBox.appendChild(li)
    }

    // 1-3. 调整一下宽度
    this.pointBox.style.width = (10 + 5) * n + 'px'
  }

  changeOne (type) {
    // 2-1. 取消 active 类名
    this.imgBox.children[this.index].classList.remove('active')
    this.pointBox.children[this.index].classList.remove('active')

    // 2-2. 根据 type 来决定修改 this.index 的值
    if (type === true) {
      this.index++
    } else if (type === false) {
      this.index--
    } else {
      this.index = type
    }

    // 判断一下边界
    if (this.index >= this.imgBox.children.length) this.index = 0
    if (this.index < 0) this.index = this.imgBox.children.length - 1

    // 2-3. 添加 active 类名
    this.imgBox.children[this.index].classList.add('active')
    this.pointBox.children[this.index].classList.add('active')
  }

  autoPlay () {
    this.timer = setInterval(() => this.changeOne(true), 2000)
  }

  // 4. 移入移出
  overOut () {
    this.ele.addEventListener('mouseover', () => clearInterval(this.timer))
    this.ele.addEventListener('mouseout', () => this.autoPlay())
  }

  // 5. 点击事件
  bindEvent () {
    this.ele.addEventListener('click', e => {
      // 处理事件对象兼容
      e = e || window.event
      // 处理事件目标兼容
      const target = e.target || e.srcElement

      // 判断左按钮
      if (target.className === 'left_l') this.changeOne(false)

      // 判断右按钮
      if (target.className === 'right_r') this.changeOne(true)

      // 判断某一张
      if (target.className === 'point') this.changeOne(target.dataset.point - 0)
    })
  }
}
const b = new Banner('#banner')



// ******************************************************************************
// 搜索框


inp.oninput = function () {
  // 2. 拿到输入的文本内容
  const text = this.value.trim()

 
  const script = document.createElement('script')
  // 给 script 标签设置 src 属性
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
  // 把 script 标签插入到 body 里面
  document.body.appendChild(script)
 
  script.remove()
}


function fn(res) {
  // 4. 根据后端返回的 res 渲染页面
  console.log(res)
  
  if (!res.g) {
    // 说明没有 g 这个数组
    ul.classList.remove('active')
    return
  }

  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })

  // 插入到 ul 内部
  ul.innerHTML = str

  // 让 ul 显示
  ul.classList.add('active')
}

//二级菜单
// ************************************************************************************************************************************
const cateBox = document.querySelector('.category')
const secondBox = document.querySelector('.right')

let str = ''

list.forEach(item => {
    str += `
        <li data-id="${item.id}">${ item.name }</li>
    `
})

cateBox.innerHTML = str

cateBox.onmouseover = function (e) {
    e = e || windoe.event
    const target = e.target || e.srcElement

    if (target.nodeName === 'LI') {
        // 拿到 id
        const id = target.dataset.id - 0
        // 从数组中找到需要的数据
        const info = list.find(item => item.id === id)

        bindSecond(info)
    }
}
function bindSecond(info) {
    let str = '<ol>'

    // info === { name: '当前移入的这个', children: [ {}, {} ] }
    info.children.forEach(item => {
        str += `
            <li>
                <span>${ item.name } > </span>
                <p>
        `
        // item === { name: '电视', children: [ {}, {} ] }
        item.children.forEach(t => {
            str += `
                <span>${ t.name }</span>
            `
        })
        
        str += `
                </p>
            </li>

        `
    })
    str += '</ol>'
    secondBox.innerHTML = str
    secondBox.style.display = 'block'
}
cateBox.onmouseout =function(){
 
  secondBox.style.display = 'none'

}
secondBox.onmouseover =function(){
 
  secondBox.style.display = 'block'

}
secondBox.onmouseout =function(){
 
  secondBox.style.display = 'none'

}

const span = document.querySelectorAll('.category > li ');
  span.forEach(item=>{
    item.addEventListener('click',()=>{
        window.location.href = `./list.html`
    })
  })

// *************************************************************************************************************************************
//秒杀倒计时

var target = new Date(2021, 8, 16, 19, 00, 00)

    // 2. 每间隔 1s, 间隔定时器
    setInterval(function () {
      // 2-2. 获取一次当前时间
      var current = new Date()
      // 2-3. 求当前时间和目标时间的时间差
      var diff = diffTime(current, target)
      hh=diff.hours;
      mm =diff.minutes;
      sas=diff.seconds;
      hs.innerText = hh < 10 ? '0' + hh : hh
      ms.innerText = mm < 10 ? '0' + mm : mm
      ss.innerText = sas < 10 ? '0' + sas : sas
    }, 1000)
    

    function diffTime(curr, tar) {
      var diffMs = Math.ceil((tar.getTime() - curr.getTime()) / 1000)
      return {

        hours: Math.floor(diffMs % (60 * 60 * 24) / (60 * 60)),
        minutes: Math.floor(diffMs % (60 * 60) / 60),
        seconds: diffMs % 60
      }
    }
    








